<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <!--表单验证bootstrapValidator CSS-->
    <link rel="stylesheet" type="text/css"
          href="/node_modules/bootstrapvalidator/dist/css/bootstrapValidator.min.css">
    <!--动态表格bootstrap-table CSS-->
    <link rel="stylesheet" href="/node_modules/bootstrap-table/dist/bootstrap-table.min.css">
    <!--树形ztree CSS-->
    <link rel="stylesheet" href="/node_modules/ztree/css/zTreeStyle/zTreeStyle.css">
    <!--树形ztree主题 CSS-->
    <link rel="stylesheet" href="/node_modules/ztree/css/metroStyle/metroStyle.css">
    <!--树形表格 CSS-->
    <link rel="stylesheet" href="/node_modules/jquery-treegrid/css/jquery.treegrid.css">
    <link rel="stylesheet" href="/static/css/animate.css">
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery -->
    <script src="/node_modules/jquery/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <!--表单验证bootstrapValidator js-->
    <script type="text/javascript" src="/node_modules/bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script>
    <!--动态表格bootstrap-table js-->
    <script type="text/javascript" src="/node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <!--动态表格bootstrap-table 汉化 js-->
    <script type="text/javascript" src="/node_modules/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <!--树形ztree js-->
    <script type="text/javascript" src="/node_modules/ztree/js/jquery.ztree.all.min.js"></script>
    <!--树形表格 js-->
    <script type="text/javascript" src="/node_modules/jquery-treegrid/js/jquery.treegrid.min.js"></script>
    <!--属性表格bootstrap js支持-->
    <script type="text/javascript" src="/node_modules/jquery-treegrid/js/jquery.treegrid.bootstrap3.js">
    </script>
    <!--自定义属性表格 js（使其能够异步加载数据）-->
    <script type="text/javascript" src="/static/js/jquery.treegrid.extension.js?v=0.0060"></script>
    <script type="text/javascript" src="/static/js/layer-v3.1.1/layer/layer.js"></script>
    <!--自定义全局函数-->
    <script type="text/javascript">
        let wpgaci = {
            goUrl: function (url, mins) {
                setTimeout(function () {
                    window.location.href = url;
                }, mins * 1000);
            }
        };
    </script>
</head>
<body>
<div class="container">
    <div class="row animated jackInTheBox" id="login-row" style="margin-top:200px;">
        <div class="col-xs-3 col-sm-3 col-md-4 col-lg-4">
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
            <div class="panel panel-success">
                <div class="panel-heading text-center" id="login-title"  ele-range>
                    用 户 登 录
                </div>
                <div class="panel-body">
                    <form action="#" method="POST" class="form-horizontal" role="form" id="login-form">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="username" name="username"
                                       placeholder="输入用户名" required data-bv-notempty-message="用户名不为空"
                                       pattern="^.{2,10}$" data-bv-regexp-message="用户名在两到十个字符之间"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <input type="password" class="form-control" id="password" name="password"
                                       placeholder="输入密码" required data-bv-notempty-message="密码不为空"
                                       pattern="^.{1,20}$" data-bv-regexp-message="密码在一到二十个字符之间"/>
                            </div>
                        </div>
                        <!--<div class="form-group">-->
                            <!--<label class="col-sm-3 control-label">记住我</label>-->
                            <!--<div class="col-sm-8">-->
                                <!--<div class="checkbox">-->
                                    <!--<label>-->
                                        <!--<input type="checkbox" value="1" name="rememberMe" id="rememberMe">-->
                                    <!--</label>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    </form>
                </div>
                <div class="panel-footer text-center">
                    <button ele-range type="button" class="btn btn-sm btn-success" onclick="view.login()" id="btn-login">
                        登 录
                    </button>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            $(function () {
                view.init();
            });
            var view = {
                init: function () {
                    $('#login-form').bootstrapValidator({
                        message: '值不能为空',
                        feedbackIcons: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        }
                    });
                    $('#login-form').on('submit', function () {
                        return false;
                    });
                },
                login: function () {
                    $('#login-form').data('bootstrapValidator').validate();
                    var b = $('#login-form').data('bootstrapValidator').isValid();
                    if (!b) {
                        return false;
                    }
                    $('#btn-login').attr('disabled', 'disabled');
                    $('#a_login').attr('disabled', 'disabled');
                    $.ajax({
                        url: "{:url('/sys/login/login')}",
                        type: 'post',
                        dataType: 'json',
                        data: $('#login-form').serialize(),
                        success: function (data) {
                            console.log(data);
                            if (data.status) {
                                layer.msg(data.msg, {icon: 1});
                                wpgaci.goUrl("{:url('/sys/index/index')}", 2)
                            } else {
                                $('#btn-login').removeAttr('disabled');
                                $('#a_login').removeAttr('disabled');
                                layer.msg(data.msg, {icon: 2});
                            }
                        },
                        fail: function () {
                            $('#btn-login').removeAttr('disabled');
                            $('#a_login').removeAttr('disabled');
                            layer.msg('网络错误，请稍后再试', {icon: 2});
                        }
                    });
                }
            };
        </script>
    </div>
</div>
</body>
</html>